import React, { useState, useEffect } from 'react';
import {Radio, Steps, Card, Button, Image} from 'antd';
import './index.css';
import { connect } from 'react-redux';
import { ipInfoAction } from '../../store/actions';
import {STATION_LAYOUT_SELECTION} from '../../uitl/constant-filename';

const { Meta } = Card;

function StationLayoutSelection({ ipInfo }) {
  const [curStep, setCurStep] = useState(0);
  const [canNext, setCanNext] = useState(true);
  const [layout, setLayout] = useState(null); // 1：前三点，2：后三点
  const [tiresNum, setTiresNum] = useState(null); // 1：单论，2：双轮

  useEffect(() => {

  }, []);

  // 0
  useEffect(() => {
    if (curStep === 0 && layout) {
      setCanNext(false);
    }
  }, [layout, tiresNum, curStep]);

  /**
   * 步骤控制
   * @param num
   */
  function control(num) {
    let temp = curStep + num;
    if (temp >= 0 && temp <= 3) {
      setCurStep(curStep + num);
    }

    if (num > 0) {
      setCanNext(true);
    }
  }

  function onChange01(e) {
    setLayout(e.target.value);
  }
  function onChange02(e) {
    setTiresNum(e.target.value);
  }

  /**
   * 完成
   */
  function finish() {
    const obj = [
      {
        id: '标识',
        name: '名称',
        code: '代号',
        value: '值'
      },
      {
        id: 261,
        name: '起落架布局形式',
        code: 'BJXS',
        value: layout
      },
      {
        id: 262,
        name: '起落架机轮数及其布置形式',
        code: 'JLSBJ',
        value: tiresNum
      },
      {
        id: '187',
        name: '重心后限与前轮距',
        code: 'QLJ_L',
        value: 5.23
      },
      {
        id: '208',
        name: '飞行器中线与前起落架轮距',
        code: 'QLJ_C',
        value: 5
      },
      {
        id: '251',
        name: '重心后限与主轮距',
        code: 'QLJ_M',
        value: 0.52
      },
      {
        id: '253',
        name: '重心前限与前轮距',
        code: 'QLJ_N',
        value: 5.02
      },
      {
        id: '258',
        name: '前主轮距',
        code: 'QLJ_B',
        value: 5.75
      },
      {
        id: '259',
        name: '主起落架与轴线距离',
        code: 'QLJ_F',
        value: 5.75
      }
    ];
    window.electronAPI.createOutputFile(obj, STATION_LAYOUT_SELECTION);
  }

  const steps = [
    {
      title: '起落架布局形式',
      content: (
        <Radio.Group block onChange={onChange01} value={layout}>
          <Radio value={1}>
            <Card
              hoverable
              className={"card"}
              cover={<Image
                alt="前三点式"
                src={`http://${ipInfo.address}:${ipInfo.cusPort}/photo/viewPhoto?filename=前三点式.png`}
              />}
              >
              <Meta
                title="前三点式"
                description="重心在主轮之前，飞机向前运动主轮收到扰动时运动是稳定的，被普遍采用"
              />
            </Card>
          </Radio>
          <Radio value={2}>
            <Card
              hoverable
              className={"card"}
              cover={<Image
                alt="后三点式"
                src={`http://${ipInfo.address}:${ipInfo.cusPort}/photo/viewPhoto?filename=后三点式.png`}
              />}
            >
              <Meta
                title="后三点式"
                description="主轮在飞机重心前，飞机向前滑行主轮收到扰动时运动稳定性不好，这种形式大都为老式螺旋桨飞机采用"
              />
            </Card>
          </Radio>
        </Radio.Group>
      )
    },
    {
      title: '起落架机轮数及其布置情况',
      content: (
        <Radio.Group block onChange={onChange02} value={tiresNum}>
          <Radio value={1}>
            <Card
              hoverable
              className={"card"}
              cover={<Image
                alt="单轮式"
                height={400}
                src={`http://${ipInfo.address}:${ipInfo.cusPort}/photo/viewPhoto?filename=单轮式.png`}
              />}
            >
              <Meta
                title="单轮式"
                description="结构简单，为很多战斗机所采用"
              />
            </Card>
          </Radio>
          <Radio value={2}>
            <Card
              hoverable
              className={"card"}
              cover={<Image
                alt="并列双轮式"
                height={400}
                src={`http://${ipInfo.address}:${ipInfo.cusPort}/photo/viewPhoto?filename=并列双轮式.png`}
              />}
            >
              <Meta
                title="并列双轮式"
                description="大多数舰载飞机的前起落架采用，以及民用飞机前轮如波音727，波音737所采用"
              />
            </Card>
          </Radio>
        </Radio.Group>
      )
    }
  ]

  // 步骤标题
  const stepTitles = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));

  return <div className={"station-layout-selection"}>
    <Steps current={curStep} items={stepTitles} labelPlacement={"vertical"} />

    <div className={"step-content"}>{steps[curStep].content}</div>

    <div className={"control"}>
      {
        curStep > 0 &&
        <Button type={"dashed"} className={"control-btn"} onClick={control.bind(this, -1)}>
          上一步
        </Button>
      }
      {
        curStep < 1 &&
        <Button type={"primary"} className={"control-btn"} disabled={canNext} onClick={control.bind(this, 1)}>
          下一步
        </Button>
      }
      {
        curStep >= 1 &&
        <Button type={"primary"} className={"control-btn"} onClick={finish}>
          完成
        </Button>
      }
    </div>
  </div>;
}

export default connect(
  (state) => {
    return {
      ipInfo: state.ipInfoSlice,
    }
  },
  {
    ipInfoAction,
  }
)(StationLayoutSelection);
